<template>
    <div class="index">

      <h1 style="margin: 10px;display: block;line-height: 100px" >{{menus.name}}</h1>
      <center>
      <div class="menuStyle">
      <el-col class="col" v-for="(item,index) in menus.list"><a  @click="getBook(index)">{{item.fictionName}}</a></el-col>
      </div>
      </center>
    </div>
</template>

<script>
    export default {
      name: "menu",
      props:{
        // menu:{
        //   name: {
        //     type: String,
        //     default: ''
        //   },
        //   list: {
        //     type: Array,
        //     default: ()=>{}
        //   }
        // }
      },
      data(){
          return{
            menus:{
              name: '',
              list: []
            }
          }
      },
      methods:{
        getBook(index){
          let ind = index+1;
        //   this.$axios({
        //     method:'post',
        //     url:'api',
        //     data:this.qs.stringify({    //这里是发送给后台的数据
        //       this.menus.list
        //     })
        //   }).then((response) =>{          //这里使用了ES6的语法
        //     console.log(response)       //请求成功返回的数据
        //   }).catch((error) =>{
        //     console.log(error) //请求失败返回的数据
        // }),

          console.log("顺序为："+this.$qs.stringify(this.menus.list));
          this.$post(ind+"",JSON.stringify(this.menus.list)).then(data=>{
            console.log(data);
            this.$router.push({
              path: '/info',
              query: {
                doc: data
              }
            })
          })
          // console.log("顺序为："+(index+1));
        },
        getParams(){
          // 取到路由带过来的参数
          const routerParams = this.$route.query.menus
          // 将数据放在当前组件的数据内
          this.menus.name = routerParams.name;
          this.menus.list=routerParams.list;
        }
      },
      created(){
        this.getParams()
      },
      watch: {
        '$route': 'getParams'
      }
    }
</script>

<style scoped>
  .index{
    width: 98vw;
    height: auto;
  }
  .menuStyle{
    padding: 0px auto;
    margin: 0px auto;
  }
  .col{
    width: 432px;
    text-align: left;
    line-height: 50px;
    border-bottom: 1px #ccc solid;
    left:1000px

  }
</style>
